<script>
export default {
  name: "UserLogin",
  mounted() {
    let userInfo = sessionStorage.getItem('user_info');
    if (userInfo != null) {
      let user = JSON.parse(userInfo);
      this.sessionStorageUserInfo = user;
      console.info(user)
      this.userId = user.id;
      this.username = user.username;
      this.userAddress = user.address;
      this.nowUserInfo.nowUserAddressId = user.addressId;
    }
    this.getAddressList();
    console.log('UserLogin准备完成');
  },
  data() {
    return {
      sessionStorageUserInfo: {},
      addressListByUserId: [],
      dialogVisibleUserInfo: false,
      // 已登陆用户的id，未登录则为''
      userId: '',
      username: '',
      userAddress: '',
      nowUserInfo: {
        nowUserId: '',
        nowUserName: '',
        nowUserAddressId: ''
      },
      rules: {
        nowUserName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 1, max: 7, message: '长度应在 1 到 7 个字符', trigger: 'blur'}
        ],
        nowUserAddress: [
          {required: true, message: '请选择默认地址', trigger: 'change'}
        ],
      }
    }
  },
  methods: {
    getAddressList() {
      this.$http.post('/user/findAddressByUserId', {userId: this.userId})
          .then(res => {
            console.log("地址")
            console.info(res.data)
            this.addressListByUserId = res.data
          })
    },
    goLogin() {
      this.$router.push("/loginCom")
    },
    logout() {
      sessionStorage.removeItem('user_info');
      this.userId = '';

      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
        this.$message({type: 'warning', message: "已退出登陆"})
      }, 200);

      // this.$router.push('/')
    },
    userInfoModel() {

      this.nowUserInfo.nowUserName = this.username;
      this.nowUserInfo.nowUserAddress = this.userAddress;
      this.dialogVisibleUserInfo = true;
    },
    userInfoModelSubmit() {
      this.$http.post('/user/updateMinUserInfo', {
        userId: this.userId,
        username: this.nowUserInfo.nowUserName,
        addressId: this.nowUserInfo.nowUserAddressId
      })
          .then(res => {
            if (res.data.msg === 1){
              this.sessionStorageUserInfo.userId = this.userId;
              this.sessionStorageUserInfo.username = this.nowUserInfo.nowUserName;
              this.sessionStorageUserInfo.addressId = this.nowUserInfo.nowUserAddressId;
              const userAddressIndex = this.addressListByUserId.findIndex(item => item.id === this.nowUserInfo.nowUserAddressId);
              this.sessionStorageUserInfo.address = this.addressListByUserId[userAddressIndex].address;
              this.username = this.nowUserInfo.nowUserName;
              this.userAddress = this.sessionStorageUserInfo.address;
              sessionStorage.setItem("user_info", JSON.stringify(this.sessionStorageUserInfo))
              this.$message({type: 'success', message: "修改成功"})
            }else alert("修改出错");

          })
      this.dialogVisibleUserInfo = false
    }
  }
}
</script>

<template>
  <div style="width: 1000px;height: 500px;background-color: rgba(1,1,1,0.1)">
    <el-dialog title="更改用户信息" :visible.sync="dialogVisibleUserInfo" width="500px" append-to-body>

      <el-form v-model="nowUserInfo" :rules="rules" ref="ruleForm" label-width="100px" class="form-login">

        <el-form-item label="用户名称" prop="nowUserInfo.nowUserName">
          <el-input v-model="nowUserInfo.nowUserName" class="user_info_input_class"/>
        </el-form-item>
        <el-form-item label="默认地址" prop="nowUserInfo.nowUserAddress">
          <el-select v-model="nowUserInfo.nowUserAddressId" placeholder="请选择活动区域" class="user_info_input_class">
            <el-option :label="item.address" :value="item.id" v-for="item in addressListByUserId" :key="item.id"/>
          </el-select>
        </el-form-item>


      </el-form>

      <span slot="footer">
        <el-button @click="dialogVisibleUserInfo = false">取 消</el-button>
        <el-button type="primary" @click="userInfoModelSubmit()">确 定</el-button>
      </span>

    </el-dialog>

    <el-row>
      <el-col :span="4" style="height: 150px;">
        <div
            style="background-color: #d6f1f1;width: 120px;height: 120px;border-radius: 50%;margin: 16px 0 0 20px"></div>
      </el-col>
      <el-col :span="16" style="height: 150px;background-color: #6a5d5d">
        <div style="line-height: 50px;width: 150px;height: 50px;background-color: aqua;margin: 10px 0 0 10px">
          <div v-if="userId===''" @click="goLogin()">点击登录</div>
          <div v-else>{{ username }}</div>
        </div>
        <div v-show="userId !== ''"
             style="margin: 10px 0 0 10px;line-height: 50px;width: 280px;height: 50px;background-color: #ffcfcf">
          {{ userAddress }}
        </div>

      </el-col>
      <el-col :span="4">
        <el-button type="danger" plain @click="logout()" v-if="userId !== ''">退出登录</el-button>
        <br><br>
        <el-button plain @click="userInfoModel()" v-if="userId !== ''">更改信息</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.user_info_input_class {
  width: 300px;
}
</style>